<script lang="ts">
	import { imageBasePath } from '$store/g';
	import RetinaBgImage from '$lib/RetinaBgImage.svelte';
	import { partnerRights, partnerConditions } from '$store/partners';
  import QualityPartner from '$lib/QualityPartner.svelte';
</script>

<RetinaBgImage
	imgSrc="{$imageBasePath}/partner-plan-top-bg.png"
	img2xSrc="{$imageBasePath}/partner-plan-top-bg@2x.png"
	alt="partner-plan-top-bg"
	classes="w-full h-[300px] bg-no-repeat bg-cover bg-center"
>
	<div class="w-[224px] mx-auto pt-12 text-[32px] font-semibold">比伶合伙人计划</div>
	<div class="w-[368px] mx-auto pt-3 text-base text-[#999999]">
		同合作伙伴一起,共建数字新生态,共享商业新成果
	</div>
	<div class="pt-8 w-36 mx-auto">
		<a
			class="rounded-[37.5px] px-4 py-2 bg-primary text-white flex justify-center items-center w-36 h-12"
			href="void:(0)">立即加入</a
		>
	</div>
</RetinaBgImage>
<div class="pt-[116px]">
	<div class="text-center font-semibold text-[32px]">完善的合伙人权益</div>
	<div class="mt-20 grid grid-cols-3 ">
		{#each $partnerRights as item}
			<div class="mb-14">
				<RetinaBgImage
					imgSrc="{$imageBasePath}/{item.logo}.png"
					img2xSrc="{$imageBasePath}/{item.logo}@2x.png"
					alt="{item.logo}"
					classes="mx-auto w-[104px] h-[104px] bg-no-repeat bg-cover bg-center"
				/>
        <div class="mt-8 text-2xl text-center">{item.title}</div>
        <div class="mt-3 w-[270px] mx-auto text-center text-[14px] text-[#999999]">{item.desc}</div>
			</div>
		{/each}
	</div>
</div>
<div class="pt-8">
	<div class="text-center font-semibold text-[32px]">合作条件</div>
	<div class="mt-16 grid grid-cols-4">
		{#each $partnerConditions as item}
			<div>
				<RetinaBgImage
					imgSrc="{$imageBasePath}/{item.logo}.png"
					img2xSrc="{$imageBasePath}/{item.logo}@2x.png"
					alt="{item.logo}"
					classes="mx-auto w-[104px] h-[104px] bg-no-repeat bg-cover bg-center"
				/>
        <div class="mt-8 text-2xl text-center">{item.title}</div>
			</div>
		{/each}
	</div>
</div>
<div class="pt-[88px]">
  <div class="text-center font-semibold text-[32px]">优质的合作伙伴</div>
  <div class="py-8">
    <QualityPartner />
  </div>
</div>
